Muchas formas se han mostrado para aplicar el conocido "Leer más" algunas son una verdadera odisea sobre todo en plantillas adaptadas, la que he descubierto me ha sorprendido como ninguna por la facilidad de añadir al blog y sobre todo el bello efecto y la posibilidad de expandir más de una entrada al mismo tiempo.
[+/-] Ver ejemplo.

Si les gusta vamos a seguir los pasos para mostrar esas entradas demasiado extensas de una bonita forma. Pero antes debo dar las gracias a Ariane de Templates Novo Blogger gracias a ella podemos saber que el autor de esta maravilla es Stu Nicholls

Comenzamos por situarnos en la plantilla Edición de HTML, localizamos ]]></b:skin> y justo antes añadimos lo siguiente:
.maintext {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
.maintext p {padding:5px 0 0 0; margin:0;}
.maintext p.bold {font-weight:bold;}
.maintext h2 {margin:0; padding:0;}
.switch {display:block; font-size:1px; width:16px; height:16px; background:url(url-imagen-abrir); cursor:pointer;}
.off {background:url(url-imagen-cerrar);}
.hide {display:none;}
.show {position:absolute; display:block; width:500px; background:#fff; border:1px solid #000; padding:10px; margin-top:5px; z-index:500;}
.show img {float:left; padding:0 10px 10px 0;}

Personalizar la caja de contenido requiere alguna modificación aunque no es necesaria, excepto el ancho de la caja que no debe ser mayor al espacio de las entradas:
width:500px; anchura de la caja expandible.
background:#fff; color de fondo de la caja.
border:1px grosor del borde.
solid #000; tipo de borde y color.
background:url(url-imagen-abrir) : url del icono rojo (expandir).
background:url(url-imagen-cerrar) :url del icono verde (recoger)

Lo siguiente lo añadiremos antes de </head>

<script>

onload = function() {


var e, i = 0;


while (e = document.getElementsByTagName ('B') [i++]) {

if (e.className == 'switch') {

e.onclick = function () {

this.className = this.className == 'switch' ? 'switch off' : 'switch';

this.nextSibling.className = this.className == 'switch' ? 'hide' : 'show';

}

}

}

}

</script>



Nos queda el último paso, se trata de añadir en cada entrada:

<div class="maintext">
<b> Texto inicial de la entrada </b>
<b class="switch"></b>
<div class="hide">Aquí escribimos el contenido oculto</div>
</div>

Donde dice "Texto inicial de la entrada" escribiremos el texto que será visible, es decir el que se muestra sin expandir la entrada.

"Aquí escribimos el contenido oculto" es el espacio para añadir el contenido de la caja, texto, imágenes, código...

Si, ya sé que es una lata copiar y pegar el código en la entrada cada vez que deseamos expandir nuestros post pero eso no es problema si lo añadimos a la plantilla de entrada.

Otras formas de expandir entradas:
Leer más- Read More (Con imagen)
Leer más con efecto expandir y recoger
Leer más (Read More)
Leer más o Read More para todas las plantillas de Blogger
Y el recomendado: Leer más original de Blogger.
La Blogueria

También se puede usar como tooltip gigante... ¡me gusta! como se abre y se cierra sin mover el resto del texto, es una excelente manera de ampliar información también para palabras o frases concretas.

¡Saludos!

Responder
Capitán K.

Lástima que no funcione con Firefox, porque está genial...

Responder
La Blogueria

¡Pero claro que funciona con Firefox, Capitán! Perfectamente además... qué raro...

Responder
Syl

Hola Gem@! te dejo un premio en mi blog :) espero que te guste!
Un besito!!

Responder
Anónimo

Gema, ¿si lo añadimos a la plantilla de entrada, añadimos juntos los tres códigos que das? ¿solo pegamos los códigos y los añadimos a la plantilla de entrada?

Responder
Gem@

Hola Vane, a mi también me gusta mucho y sobre todo ese efecto que dices que no mueve la página ;)

Capitán está comprobado que funciona con IE6, IE7, Firefox, Opera and Safari igual no esperaste que cargara la página antes de clicar :)

Hola Syl, muchas gracias tesoro no sé de donde voy a sacar tiempo para recoger tanto premio pero te lo agradezco igualmente :P

Camila hay que seguir lo pasos tal y como está indicado, el código que añadimos donde escribimos
el post es el que podemos pegar en la plantilla de entrada el que viene a continuación de "Nos queda el último paso, se trata de añadir en cada entrada"
(todo lo que incluimos en la plantilla de entrada automáticamente aparece en todas las entradas eso nos evita copiar y pegar continuamente)

Es muy sencillo pero si te quedan dudas házmelo saber ;)

Responder
Anónimo

Wooo! Algo así necesito, muchas gracias por compartirlo y claro al autor. Me será de gran utilidad, muy bien explicado y funciona perfectamente.

Responder
Ariane

Olá! Muito obrigada pela referência ao meu blog. Seu blog é muito bonito e interessante!Abraços

Responder
Gem@

Me alegra que te sea útil OzValdo :)

Saludos y bienvenida Ariane, la referencia es bien merecida ;)

Responder
Alexander Dmitrievich

De verdad se ve bien, yo no he tenido nunca problemas con el "leer más normal" aunque leí tu otra entrada y estoy pensando en poner una imágen.
Gem@ el enlace hacia mi web no funciona, lo podrías arreglar por favor?
es www.mundosoviet.com
Gracias! ;)

Responder
Gem@



Arreglado Soviet :)
Gracias por avisarme.

Responder
Anónimo

Me encantó Gem@! Me llevo los códigos y ya habré de probar. Mucho tiempo fuera, de viaje, y mucho sin tocar las plantillas ni aplicar recursos. Espero no hacer líos ;-)

Un beso desde As As

Responder
laeulalia

Voy a probarlo en Tuneando, ya te contaré.
Besos.

Responder
Emerald

Hola Gema! Muchas gracias por este truquito! ya lo puse en mi blog y funciona de maravilla!
Saludos

Responder
laeulalia

Hola Gema:
Lo he colocado en Tuneando. ¡De coña!
Lo he usado en la entrada de la lluvia de dibujitos, para "esconder" parte de la entrada.
¡Por cierto! Como no encontraba imágenes del más menos, te he cogido las tuyas, aunque las he subido a mi propio servidor para no abusar.
Espero que no te moleste, de lo contario solo tienes que decírmelo y las quitaré.

Un beso.

Responder
Gem@

Me alegra que te gustara Mar si te haces líos ya sabes donde encontrarme :)

Eulalia ¿pero dudabas que te quedaría bien? si te peleas con las plantillas como nadie¡¡ Otro beso para ti :) :)

Luzdeluna veo que ha tenido una buena acogida :) me alegra que te sea útil.

Responder
LilVia

Hola Gema. Me ha ido muuuuy bien este tutorial y he conseguido un read more como quería. Pero, tal vez es una pregunta muy tonta (yo no entiendo mucho, la verdad), ¿cómo puedo conseguir que no me salga por defecto en negrita?
Gracias, saludos

Responder
Gem@

Hola LiVia en el código que añadimos a la entrada:
<div class="maintext">
<b> Texto inicial de la entrada </b>
<b class="switch"></b><div class="hide">
<b> Aquí escribimos el contenido oculto </b>
</div>
</div>

elimina lo que está en negrita ;)

Responder
LilVia

oK!!!! MUCHAS GRACIAS!!!

Responder
Unknown

HOLAAAAAAAAA!!! WOW WOW WOW!!! SOY NUEVO EN ESTO Y YA CASI ME PREGUNTAN "QUE COMO LE HICE PARA TAL" "QUE COMO SE HACE CUAL" Y PUES OVIO LOS MANDO PARA ACÁ CONTIGO... MUCHAS GRACIAS POR TU GENEROSIDAD Y TU HUMILDAD AL COMPARTIRNOS TODO LO QUE SABES..

ME AYUDAS MUCHO Y POR ESO QUE DIOS TE BENDIGA!
:D

BUENAS NOXES!!!
.............

Responder
Negrolosz

hola gema, puse los codigos que vos decis, y donde bien marcaste pero no hubo caso.
te comento tengo este blog y dos de prueba, que se encuentran el perfil que habilite para que los veas, y en esos si funcionan.

Que hice mal?
gracias

Responder
Gem@

Un poco de mi siento no ver este comentario antes :)
Si aún tienes problemas con el código házmelo saber ¿ok?

Responder
Anónimo

Hola Gema:
gracias por todos tus tips.. me han servido mucho pero no se por que este no me funciona en mi blog.. si puedes por fis ayudame..
Que el Señor te bendiga.. mi hermosos blog es
http://www.sabrinabaraque.blogspot.com/

Responder
Gem@

Sabrina mira si la dirección del script la añadiste bien y en el lugar indicado, si todo está en orden entonces comprueba que no sea el servidor del script por si en ese momento estaba fuera de servicio ;)

Responder
Anónimo

No le puse ninguna direccion aun no se como hacerlo del servidor del script... explicame por fis cual es la direccion del script de donde la saco...

Responder
Gem@

Perdona Sabrina me he confundido, quiero decir si añadiste el código del script en el lugar indicado.
El script es esa parte que dice:
"Lo siguiente lo añadiremos antes de </head>"
Si lo haces paso a paso verás como resulta bien ;)

Responder
titicent

hola gem@ queria saber si este truco es aplicable a otras secciones del blog por ejemplo para ocultar widgets o elementos como las etiquetas

;) espero tu respuesta

Responder
Emile

Bellísimo! Muy elegante, es cierto. Gracias Gem@!
Lo implementé en mi blog pero con algunos cambios -cambié 'absolute' por 'center' y ya no lo abre en un recuadro encimado sino que corre todo para abajo sin tapar nada... ¡y sin mover la página!
Ahora me tengo que poner las pilas y agregarlo en decenas de entradas. Paciencia.

Gracias por tus excelentes explicaciones, como siempre.
Saludos

Responder
Gem@

Me alegra que te resultara bien Emile, en efecto añadiendo center centramos la caja contenedora, te queda perfecto ;)

Responder
Gem@

TITICENT en la sidebar también funciona perfectamente pero no he probado a incrustar widgets supongo que si. Si quieres probamos en próximas entradas ;)

Responder
Anónimo

Hola Gem@ mil gracias por toda la ayuda que ofreces . Me encantó este truco para expandir las entradas. Pero la verdad como soy muy nueva en esto y todo lo estoy aprendiendo de vos no sé de donde sacar las Url de las imágenes. me podrías ayudar un poquito más ? y perdón si son muy básicas mis preguntas.

Responder
Gem@

Hola Ego las imágenes son a modo de ejemplo se pueden poner cualquier otra imagen tipo icono es la ideal.
Si te gustan estas puedes descargarlas de aquí:
cerrar
abrir
Es conveniente que las alojes en un servidor, una entrada del blog puede servirte, te lo digo porque si algún día la banda ancha del alojamiento donde están deja de funcionar no se visualizan.
Suerte :)

Responder
Xoxe Mª "Olano"

Me hago un verdadero lio para consguir la url de una foto¿ me lo podrias esplicar? gracias

Responder
Gem@

Xoxe ratón sobre la imagen, botón derecho y en el desplegable que se abre buscar propiedades.
En propiedades debes clicar con el botón izquierdo te dirá algo así como "Direción url de la imagen" o te dará una ubicación, todo depende del navegador que estés usando.
Cuando tengas la url de la imagen debes copiar y si la pegas en la barra del navegador puedes ver la imagen.
Cuando la visualizas otra vez ponemos el ratón sobre la imagen y con el botón derecho le damos a "Guardar como..."
Parece complicado pero es muy sencillo, con la práctica lo harás sin darte cuenta :)

Responder
Xoxe Mª "Olano"

Muchas grcias por la informacion y la rapided,mereces el cielo por la buena persona que eres,un sincero y afectuoso saludo desde Vigo

Responder
Gem@

Gracias Xoxe :) :) :)

Responder
Unknown

Hola tu blog me ha servido de mucho pero quiero implementar esto de expandir entradas en mi blog y ya segui todo al pie de la letra detalladamente hecho varias veces y no me resulta, y queria pedir de favor si podrias explicarme el por que o ayudarme hacerlo me interesa mucho ademas de que se ve muy bien Saludos y muchos exitos con el blog que esta muy bueno Felicidades

mi blog es

xTorquemadax

espero y me puedas ayudar Bytes

Responder
Gem@

Hola xRojôx.
Cuando cree esta entrada el script funcionaba perfectamente en mi blog pero había otros que dejaron de funcionar por lo que me vi obligada a suprimirlo y opte por poner el ejemplo en el blog de pruebas, allí no presenta problemas ya que hay pocos scripts. Sigo buscando la solución para que funcione en este blog.
Es probable que si lo añadiste correctamente siguiendo los pasos indicados y no funciona sea también tu problema, en vez de añadir el script justo antes de ]]></b:skin&gt; prueba a ponerlo justo antes de </body> con esto podría solucionarse.
Ya me dirás algo... :)

Responder
Anónimo

Hola Gema, yo igualmente trate de implementar el codigo enMi blog primero antes del /b:skin y luego como dices en el ultimo comentario antes de /body pero no me funciona.
Creo que tambien tengo ya demasiados scripts.


Por otro lado queria ver si podrias ayudarme, ya que mi favicon ha dejado de verse, tienes alguna idea de lo que podria estar pasando??

Gracias de antemano

Responder
Gem@

Gore el script nunca debe ir antes de ]]></b:skin> sino antes de </head> en ocasiones los script no son compatibles y es necesario buscarle otro lugar como por ejemplo antes de </body>
Para saber si algo está haciendo mal añádelo a un blog de pruebas que no tengas scripts y vemos el resultado ;)

Sobre el favicón ya es la segunda vez que lo comentan esta noche, pero en tu caso creo que está mal, añádelo después de <head>
;)

Responder
Anónimo

gracias mil, lo intentare

Responder
Anónimo

Hola Gem@ que tal ? yo aquí de nuevo solicitando tu ayuda. Resulta que yo había implementado este script en mi blog y funcionaba bárbaro pero resulta que desde ayer ha dejado de funcionar. Claro que en estos días estuve agregando algunas cosillas a mi blog y temo que se haya generado algún tipo de incompatibilidad pero no sé como solucionarlo. Es muy importante para mí ya que mi blog es de mucho blabla y lo tengo aplicado en casi todas mis entradas. Desde ya mil gracias y cualquier cosita que puedas decirme será más que bienvenida para mí.
Un saludo Lía

Responder
Gem@

Hola L.S. sin querer o queriendo tu mismo encontraste el error, si ha dejado de funcionar a partir de añadir algo a la plantilla me temo que ese es el problema ¿solución? probar eliminando eso último que añadiste ¿por casualidad es un script?

Responder
Anónimo

Hola gema lo último que añadí eran unos códigos para numerar los comentarios; antes había puesto los globitos esos que encontre en el blog de Pizco que van en el titulo de las entradas. Es que la verdad me encanta meterle mano a mi plantilla y después ya no sé ni por dónde ando. claro que en estos últimos tiempos he aprendido bastante pero no lo suficiente como para dejar de necesitar de la ayuda de los expertos como vos. Un saludo gracias. Ahora me voy a poner a ver por dónde puede andar el problema.
Lia

Responder
Anónimo

hOla Gemita te cuento que ya solucione mi problema.Al parecer era incompatibilidad. Lo último que yo había agregado eran unos códigos para numerar los comentarios; otro que era para los globitos con el numero al lado del título y uno que tenía que ver con abrir los enlaces en otrar ventanas. yo rogaba que el problema no sea el de los globitos porque me encanta como quedan y menos mal que no. El problema al parecer era el de abrir enlaces en ventanas nuevas porque le quite ese y todo volvió a funcionar.
Mis Saludos y graicas nuevamente.
Lía

Responder
Gem@

L.S mil gracias por venir a contarlo, lo tendré en cuenta por si le pasa a alguien más :) :) :)

Responder
RAMPY

Hola , Gema, no encuentro la línea desde la cual debo empezar. Esa aparece en todas las plantillas? Gracias por tu ayuda.
Rampi

Responder
Anónimo

Hola Gemita qué tal ? una consulta. Me gustaría saber si habrá alguna posibilidad de que toda la parte esa que va bajo las entradas, digo esa parte que dice: etiqueta:... publicado por:.... enlace a esta entrada: creo que se llama foooter o algo asi. Bueno quería saber si hay alguna forma de que todo quede incluido dentro del cuadro oculto; es decir que no se vea hasta darle click al + . Espero que me hayas entendido. Yo tengo implementado en mi blog este truco de 'elegante sist. para expandir entradas' pero aveces cuando una entrada es muy extensa hay que volver hasta el principio para cerrarla y seguir leyendo otras entradas o quiza entrar a la parte de comentario. bue Un saludo y desde ya toda mi gratitud.
Lía

Responder
Gem@

¿No encuentras ]]></b:skin&gt; Rampy?

No Insomnya con este script no hay que modificar nada de la plantilla y sólo oculta el contenido que añadimos en la entrada :(

Responder
RAMPY

No, no lo encuentro corazón.
Un beso

Responder
Inmortal

Lo he probado en Diferentes Plantillas, y No Sirve, que hare mal?
:p

Y quisiera agregar que es el primero que no me sale de los que has publicado aqui

Responder
Gem@

RAMPI tu plantilla no es de las clásicas es en las únicas que ese código no está :O mira bien porque está al final de la css y justo antes de </head> aunque si tienes añadidos scripts entonces estará justo después de los scripts.

Guillermo el problema puede ser que o no está correctamente añadido o... crea conflicto con otro script.
Cuando pruebes hazlo en una plantilla que no tengas scripts añadidos de esa forma sabemos si es eso.

Responder
Anónimo

hola gem@!!! ¿cómo hago a posteriori para usar alguno de estos sistemas? ya tengo entradas, y se me borró todo, tuve que corregir la plantilla...

Responder
Anónimo

gem@ vuelvo a pedirte ayuda en esto porque quiero usar alguno de los sistemas de expandir entradas en mi blog que está muy cargado de texto. ¿cómo lo hago ahora que ya hay entradas? lo intenté y se me borró TODO!!!

Responder
Gem@

y lk hay un sistema muy sencillo para mostrar y ocultar texto puedes verlo aquí.

Responder
Cooperadora Hogar Crecer

Hola Gem@!
es precioso este efecto, pero algo no me funcionó. Te detallo:

1 - Este código no lo encontré en la plantilla: ]]></b:skin. Es lo mismo?

2 - Leí por ahí arriba que solo funciona con IE6 - IE7 Cómo sé cuál tengo yo?

3 - Si la persona que lo ve no tiene IE6 o IE7, tampoco le funcionará el efecto?

4 - Igualmente en Firefox no me funciona.

Podrás detectar dónde tengo el inconveniente?

Muchas gracias!
Corina

Responder
Cooperadora Hogar Crecer

Hubo un error en el envío en el primer punto, era así:

1 - Este código no lo encontré en la plantilla:

]]></b:skin?

Responder
Cooperadora Hogar Crecer

Disculpame tantos comentarios, pero no lo envía tal como lo pongo.

Me refiero al principio de tu entrada, donde dice: "Comenzamos por situarnos en la plantilla Edición de HTML, localizamos. . ." Después de b:skin hay un signo y luego estas letras: gt

Así como está ahí, no lo encuentro en mi plantilla.

Si querés, para no agregar tanto espacio aquí, por favor respondeme al mail: hogarcrecer@gmail.com

Gracias!

Responder
Gem@

:: Hogar CRECER primeramente decirte que no debes preocuparte por las veces que sea necesario dejar un comentarios, luego comentarte que en la entrada había un error porque en efecto la etiqueta que hay que buscar es ]]></b:skin> tal y como dices que tienes pero al convertir el código cometí ese error :S
Respecto a los navegadores eso es lo que en un principio dice el autor pero yo uso Firefox y mi ejemplo lo veo sin problemas.
Es recomendable actualizar siempre a las últimas versiones de los navegadores sea el que sea. La forma que lo van a visualizar tus visitas es algo que ya no vas a poder controlar porque cada uno usará un navegador distinto o una versión distinta.
¿Cómo saber la que estás usando? ve a la barra de herramientas y en ayuda busca donde dice "Acerca de Internet Explorer" ahí verás la versión que estás usando.
He añadido en esta misma entrada un enlace con el sistema para expandir entradas que en mi opinión es el que mejor funciona.

Responder
Cooperadora Hogar Crecer

Gracias por la pronta y completa respuesta. Voy a hacer todas las tareas como alumna aplicada!!!
Ya miré la entrada que agregaste, pero es tan bonito y realmente elegante este sistema que voy a insistir un poco más para lograrlo, vale la pena. Hasta cualquier momento!

Responder
Play

Gem@ pueden haber dos div class="hide" en la misma entrada.

Responder
Gem@

:: Cargohe eso daría como resultado un bloque dentro de otro, no he probado la verdad es cuestión de probar.

Responder
Ushuaia 24 Noticias

te hago una pregunta existe alguna posbilidad de que en vez de expandirla en la pagina principal se extienda desp de darle click en la entrada¿ osea que se vea mas grande

Responder
Gem@

:: Ushuaia Software hasta donde yo sé no es posible, el script hace que se muestre en la misma entrada :S

Responder
Vero Rodriguez

hola, una pregunta ¿si ya estoy usando un truco para "leer mas" este funcionara igual?
porque lo hice en un blog de prueba y todo va bien salvo que cuando pongo expandir no aparece nada. gracias

Responder
Docentes:

hola, gem muy interesante tu blog, me ha sido de mucha ayuda, he probado este recurso pero cuando hago click sobre el icono de abrir no se me despliega la imagen que deseo poner, copiando y pegando la url en el codigo de la entrada no me funciona. Y otra como pongo los bordes transparentes o sea que no tenga. Gracias Saludos

Responder
Gem@

:: Vero Rodriguez depende el truco que estés usando, si utiliza scripts de una misma librería puede que no de problemas pero de dos librerías distintas es muy posible que deje de funcionar.

:: Docentes tendría que ver algún ejemplo online para saber que ocurre :S

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top